import { useEffect } from "react";
import { message, Space, Select, Form, Card } from "antd";
import { Button } from "@douyinfe/semi-ui";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import useRemoteDatabaseVersions from "../../hooks/useRemoteDatabaseVersions";
import useUpdateDatabaseStructure from "../../hooks/gateway/useUpdateDatabaseStructure";

const SelectDatabaseVersion = ({ reloadData }) => {
    const { selectedPerson } = useModel("gateway.info");
    const { onCloseGlobalModal } = useModel("global.modal");

    const { loading, versions } = useRemoteDatabaseVersions(selectedPerson.databaseVersionNo || "");
    const { loading: updateLoading, updateDatabaseStructure } = useUpdateDatabaseStructure();

    const state = useReactive({
        bntLoading: false,
        selectVersionNo: null,
        scripts: [],
    });

    return (
        <Space direction="vertical" size={0} style={{ width: "100%", padding: 20 }}>
            <Form.Item label="数据库版本">
                <Select loading={loading} allowClear onChange={(value) => (state.selectVersionNo = value)}>
                    {versions.map((item, index) => (
                        <Select.Option key={index} value={item.versionNo}>
                            {item.versionNo}
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>

            <div style={{ textAlign: "center" }}>
                <Button
                    loading={updateLoading}
                    type="primary"
                    onClick={() => {
                        if (!state.selectVersionNo) return message.warning("请选择数据库版本号");
                        updateDatabaseStructure(state.selectVersionNo, (res) => {
                            if (res) {
                                if (res?.message) {
                                    message.warning(res.message);
                                    onCloseGlobalModal();
                                    return;
                                }
                                if (res?.error) {
                                    message.warning("升级个人数据库发生错误：" + res.error);
                                    state.scripts = res.scripts || [];
                                } else {
                                    message.success("成功升级个人数据库");
                                    reloadData();
                                    onCloseGlobalModal();
                                }
                            }
                        });
                    }}
                >
                    升级数据库
                </Button>
            </div>

            {state.scripts.length > 0 && (
                <Card
                    bordered={true}
                    hoverable
                    title={<span style={{ color: "red" }}>数据库结构更新出错，下面是待更新的数据库SQL：</span>}
                    size="small"
                    style={{ marginTop: 10 }}
                    bodyStyle={{ padding: 0 }}
                >
                    <pre>{state.scripts.map((item) => item)}</pre>
                </Card>
            )}
        </Space>
    );
};

export default SelectDatabaseVersion;
